import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import  { FC, useContext } from 'react';
import * as Api from '@/api/login'
import type { Ilogin } from '@/interface/login'
import _ from 'lodash'
import { userContext } from '@/store/userContext';
const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

const Login: FC = () => {
   const context = useContext(userContext) as any
    const navigagte = useNavigate()
    const onFinish = _.debounce(async (values: any) => {
        console.log('Success:111', values);
        const { code, token } = await Api.LoginTo({ admin_name: 'admin', pwd: '123456' } as Ilogin)
        if (code === '00000') {
            // token 和用户信息储存起来
            window.sessionStorage.setItem('token', token)
            // 用户信息放到全局的context中 TODO
            context.updateUserState({
               mobile: '1588888888'
            })
            // 跳转路由
            navigagte('/index/home')

        }
    }, 500);

    return (<>

        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true, username:'admin',pwd: '123456' }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >

            <Form.Item
                label="账号"
                name="username"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="pwd"
                rules={[{ required: true, message: 'Please input your password!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    </>);
}

export default Login;